<template>
  <div class="nav" :style="{ opacity }">
    <button @click="goBack">返回</button>
  </div>
  <div class="container">
    <img :src="item.pic" alt="" />
    <p>{{ item.title }}</p>
  </div>
</template>
<script>
export default {
  name: "Detail",
};
</script>
<script setup>
import useDetailHook from "./Hooks/useDetailHook";
import useNavHook from "./Hooks/useNavHook";
import { useRouter } from "vue-router";
const { item } = useDetailHook();
const { opacity } = useNavHook();
const $router = useRouter();
const goBack = () => {
  /* 让detail页面出栈 */
  $router.back();
};
</script>

<style scoped>
.nav {
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: #652e80;
  left: 0;
  top: 0;
  z-index: 1000;
}
.container {
  height: 1500px;
  margin-top: 50px;
  text-align: center;
}
.container img {
  width: 200px;
  height: 300px;
}
</style>
